﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Mapsui.Forms </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Mapsui.Forms ">
    <meta name="generator" content="docfx 2.40.12.0">
    
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    <meta property="docfx:rel" content="../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../images/logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="mapsuiforms">Mapsui.Forms</h1>

<p>Mapsui.Forms is a Xamarin.Forms native library for Mapsui. With this
library it is possible to use Mapsui without any renderer.</p>
<p>Mapsui.Forms uses SkaiSharp.Views.Forms to display the map on the
device. This works for iOS, Android, UWP and Mac OS. WPF should be
possible too, but isn&#39;t tested.</p>
<h2 id="installation">Installation</h2>
<ol>
<li>Create a normal Xamarin.Forms project</li>
<li>Add Mapsui.Forms from NuGet to the packages</li>
<li>Add the line <code>xmlns:mapsui=&quot;clr-namespace:Mapsui.UI.Forms;assembly=Mapsui.UI.Forms&quot;</code>
to the Xaml file</li>
<li>Add the Mapsui.Forms view with
<code>&lt;mapsui:MapView x:Name=&quot;mapView&quot;
 VerticalOptions=&quot;FillAndExpand&quot;
 HorizontalOptions=&quot;Fill&quot;
 BackgroundColor=&quot;Gray&quot; /&gt;</code>
to the Xaml <contentpage> part file</contentpage></li>
<li>Add in the code behind the following
````
var map = new Map
{
 CRS = &quot;EPSG:3857&quot;,
 Transformation = new MinimalTransformation()
};</li>
</ol>
<p>var attribution = new BruTile.Attribution(&quot;© OpenStreetMap contributors&quot;,
    &quot;<a href="http://www.openstreetmap.org/copyright">http://www.openstreetmap.org/copyright</a>&quot;);
var tileSource = new HttpTileSource(new GlobalSphericalMercator(),
    &quot;http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,
    new[] { &quot;a&quot;, &quot;b&quot;, &quot;c&quot; }, name: &quot;OpenStreetMap&quot;,
    attribution: attribution);
var tileLayer = new TileLayer(tileSource) { Name = &quot;OpenStreetMap&quot; };</p>
<p>map.Layers.Add(tileLayer);
map.Widgets.Add(new Widgets.ScaleBar.ScaleBarWidget(map) { TextAlignment = Widgets.Alignment.Center, HorizontalAlignment = Widgets.HorizontalAlignment.Left, VerticalAlignment = Widgets.VerticalAlignment.Bottom });</p>
<p>mapView.Map = map;</p>
<pre><code>6. Now you are ready to run a test
</code></pre></article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/Mapsui/Mapsui/blob/master/docfx/documentation/Mapsui.Forms.md/#L1" class="contribution-link">Improve this Doc</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            
            <span>Generated by <strong>DocFX</strong></span>
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
  </body>
</html>
